javascript表單資料處理&驗證(DAY22)

13th鐵人賽

Vince

2021-10-05 12:44:49

3051 瀏覽

分享至

這篇文章會介紹如何使用DOM來處理表單的物件存取，以及利用條件判斷式來處理表單的驗證，像是在上一篇的部分有舉了一個例子，裡面使用到了if-else的條件判斷式來判斷使用者有沒有正確輸入開發者所設定的範圍值，不可超出此範圍，否則會變為無效值之類的，而這篇要來介紹用判斷式來設定必填欄位的方法和判斷使用者輸入的值是否為數值的屬性!

DOM表單存取

Html表單元素:`<form name="messagebox">`

document.forms["messagebox"];
messagebox為上面html表單form的name屬性，也可以使用id屬性。
document.forms["messagebox"].elements["0"].value;
取得messagebox表單中第一個元素的值。
document.forms["messagebox"].elements["area1"].value;
或 document.forms["messagebox"].elements.area1.value;
取得messagebox表單中id或name為area1的值。

輸入框的必填欄位&資料型別驗證

必填欄位

if(必填欄位名稱.value == " "){
alert("此為必填欄位!");}

將資料用整數傳回
parseInt()
Ex: parseInt("6.666");
答:6
將資料用浮點數傳回
parsefloat()
Ex: parseFloat("6.666");
答:6.666
判定使用者輸入的資料是否為NaN(not a number不是數值)
屬性:isNaN()
補充:若不是數值則傳回true，否則會false

Example:

若使用者沒有輸入東西，為空值，則跳出提示窗且不會新增留言
若使用者不是輸入數值，則跳出提示窗且不會新增留言
若使用者輸入浮點數，則會轉換成整數輸入

<head>
    <script>
        function add() {
            var message = parseInt(document.forms["messagebox"].elements["area1"].value);
            //存取id為area1的表單元素值，且轉換成整數型別
            if (message == "" || isNaN(message)){
                alert("為必填欄位並輸入數值")
                return;
            }
            //若輸入框為空值或輸入的不是數值，則結束函式，不執行下面的指令!
            var textnode = document.createTextNode("user:" + message);
            var br = document.createElement("br");
            var area = document.getElementById("area2")
            area.appendChild(textnode);
            area.appendChild(br);
            document.getElementById("count").innerText = area.children.length;
        }
    </script>
</head>
<body>
    <form id="messagebox">
        <h1>留言版</h1><hr />
        <textarea id="area1" name="area" rows="8" cols="30" placeholder="在此留言(只能輸入數值喔)!"></textarea><br />
        <input type="button" value="新增留言" onclick="add()" /><br />
        <p>現在有<span id="count">0</span>則留言</p>
        <div id="area2">
        </div>
    </form>
</body>